<template>
    <fieldset>
        <legend>tab切换</legend>
        <button v-for="item in buttons" :key=item  @click="handleClick(item)"  :class="['tab-button',{active:item===selectBtn}]">{{item}}</button>
        <div class="tab" :is="box">123</div>
    </fieldset>
</template>
<script>
import emailCom from './email.vue'
import homeCom from "./home.vue"
import mineCom from "./mine.vue"


 export default{
        components:{
            emailCom,
            homeCom,
            mineCom
            
        },
        data(){
            return{
                buttons:["email","mine","home"],
                selectBtn:'email'
            }
        },
        methods:{
            handleClick(item){
                this.selectBtn=item
                
            }
        },
        computed:{
            box(){
               return this.selectBtn+"Com"
            }
            
        }
 }
  

</script>

<style scoped>
    .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
    }

    .tab-button:hover {
        background: #e0e0e0;
    }

    .tab-button.active {
        background: hotpink;
    }

    .tab {
        border: 1px solid #ccc;
        padding: 10px;
    }
    h1 {
        margin:0;
    }
</style>